<template>
	<div>
		<div class="select3Wrap" ref='select3' :style="screenHeight">
			<div v-show="dataslens>0">
				<div class="select3Box">
					<div class="sel flex-h">

						<div class="swiper-container swiper-container-vertical swiper-container-free-mode selLeft" id="swiperSel1" style="position: relative;">
							<div class="swiper-wrapper">
								<div class="swiper-slide swiper-slide-active" @touchmove.stop.prevent="handleTouchMove">
									<Scroller lock-x style='height: 6rem;'>
										<div class="bar1">
											<span :class="num1===index?'active1':''" :style="item.collegeName.length>8?'line-height:0.5rem;overflow:hidden':'line-height:1rem'"
											 v-for="(item,index) in sortdata" :key="index" @click="cli1(index)"><b>{{item.collegeName}}</b></span>
										</div>
									</Scroller>
								</div>
							</div>
						</div>

						<div class="swiper-container flex1 swiper-container-vertical swiper-container-free-mode selRight" id="swiperSel2">
							<div class="swiper-wrapper">
								<div class="swiper-slide" @touchmove.stop.prevent="handleTouchMove">

									<Scroller lock-x style='height: 6rem;'>
										<div class="bar2">
											<span :class="num2===$index?'active1':''" v-for="(its,$index) in erziData" :style="its.majorName.length>10?'line-height:0.5rem;overflow:hidden':'line-height:1rem'"
											 @click="clikcDesc('univ',$index,its.majorCode,its.majorName)" :key="$index+10"><b>{{its.majorName}}</b></span>
										</div>
									</Scroller>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div v-show="dataslens===0">
				<img style="display: block;width: 3.5rem;height: 3.65rem;margin: 0.5rem auto 0.2rem;" src="~/static/icon/blank.png"
				 alt="">
				<span style="display: block;text-align: center;font-size: 0.3rem;">暂无数据</span>
			</div>
			<select-desc :showWho='whos' v-on:clearShowDesc="clearDesc" :showselect2='showsdesc' :mainsData='maDetailData'
			 :majortitle='majortitles'></select-desc>
		</div>
		<!-- 结束 -->
	</div>

</template>

<script>
	import { getInformation, academyMajorInfos } from "~/api/college";
	import selectDesc from '~/components/selectNews2'
	import {
		Swiper,
		SwiperItem,
		Scroller
	} from 'vux'
	import ls from 'store2'
	export default {
		props: {

			syStyle: Boolean,
			shows1: Boolean
		},
		components: {
			selectDesc,
			Swiper,
			SwiperItem,
			Scroller
		},
		data() {
			return {
				majortitles: '',
				maDetailData: {},
				screenHeight: '',
				showsdesc: false,
				whos: '',
				num1: 0,
				num2: null,
				num3: 0,
				erziData: [],
				sunziData: [],
				sortdata: [],
				dataslens: 1


			};
		},
		computed: {

		},
		mounted: function() {
			this.$vux.loading.show()
			this.showFirst()


		},
		methods: {
	
			showAnBack() {
				if (this.commonJs.isTerminal() == 'isAndroid') {
					if (window.history && window.history.pushState) {
						history.pushState(null, null, document.URL);
						window.addEventListener('popstate', this.fun, false); //false阻止默认事件
					}
				}
			},
			fun() {
				console.log('返回')
				this.showsdesc = false
				setTimeout(() => {
					this.removeback()
				}, 50)

			},
			removeback() {
				window.removeEventListener('popstate', this.fun, false);
				setTimeout(() => {
					this.commonJs.android()
				}, 10)
			},
			handleTouchMove: function(e) {
				let poChange = e.changedTouches[0].pageY
			},
			showFirst() {
				let adhei = window.screen.height - 82
				this.screenHeight = "height:" + adhei + "px"
				this.showMajor()
			},
			showMajorDetail(ids) {
				getInformation({
					"academyCode": ls.get('applsData').academyCode + "",
					"majorCode": ids
				}).then(res => {
					if (res.code === '0') {
						if (res.data) {
							this.maDetailData = res.data;
						}

					}
					this.$vux.loading.hide();
				}).catch((error) => {
					this.$vux.toast.text('暂无数据');
					this.$vux.loading.hide();
				})
			},
			showMajor() {

				academyMajorInfos({
					"academyCode": ls.get('applsData').academyCode + ""
				}).then(res => {
					if (res.code === '0') {
						if (res.data) {
							if (res.data.length > 0) {
								this.sortdata = res.data
								this.erziData = this.sortdata[0].academyMajorInfoVos;

							} else {
								this.dataslens = 0
							}
						}
					}
					this.$vux.loading.hide();
				}).catch((error) => {
					this.$vux.toast.text('暂无数据');
					this.$vux.loading.hide();
				})
			},
			clearDesc() {
				this.showsdesc = false
				this.removeback()
			},
			clikcDesc(sre, $index, ids, nsa) {

				this.$vux.loading.show({
					text: '正在加载'
				})
				this.num2 = $index;
				this.whos = sre;
				this.majortitles = nsa;
				this.showMajorDetail(nsa);

				this.showsdesc = true;
				this.commonJs.destr()
				setTimeout(() => {
					this.showAnBack();
				}, 10)
			},
			cli1(index) {
				this.num1 = index

				this.erziData = this.sortdata[index].academyMajorInfoVos;
				console.log('thisnum2',this.num2)
				this.num2=null
				// this.num2 === 0 ? '' : this.num2 = 0;
				console.log('thisnum2111',this.num2)
			},
			cli2(index) {
				this.num2 = index;
			}

		}
	};
</script>


<style scoped lang="less">
	.select3Wrap {
		width: 7.5rem;

		background: #fff;
		overflow: hidden;
		padding-bottom: 0.5rem;
		padding-top: 0.4rem;


		.select3Box {

			width: 6.9rem;
			min-height: 5rem;
			height: auto;
			margin: 0.3rem auto 0;
			border: 1px solid rgba(238, 238, 238, 1);

			.selLeft {
				width: 3rem;
				height: 6rem;
				overflow: hidden;

			}

			.selRight {
				height: 6rem;
				overflow: hidden;
			}

			.swiper-container {
				height: 6rem;
				overflow: hidden;

				.swiper-slide {
					height: auto
				}
			}



			.sel {
				height: auto;
				align-items: initial;

				.bar1 {
					min-height: 100%;
					width: 3rem;
					height: auto;
					background: rgba(245, 245, 245, 1);
					transition: all 0.3s;
				}

				.bar2 {
					height: 100%;
					// background: blue;
				}

				.bar3 {
					height: 100%;
					// background: red;

				}

				.bar1,
				.bar2,
				.bar3 {
					span {
						display: block;
						height: 1rem;
						width: 100%;
						text-align: center;
						line-height: 1rem;

						b {
							font-size: 0.26rem;
							font-weight: bold;
							color: rgba(34, 34, 34, 1);
						}
					}

					.active1 {
						background: #fff;

						b {
							color: rgba(104, 189, 26, 1);
						}
					}
				}

				.bar2 {
					span {
						// box-shadow:-1px 0px 0px 0px rgba(238,238,238,1);
						border-right: 1px solid rgba(238, 238, 238, 1);
					}

					.active1 {
						border-right: none;
						// border-top: 1px solid rgba(238, 238, 238, 1);
						// border-bottom: 1px solid rgba(238, 238, 238, 1);
					}

					span:nth-of-type(1) {
						border-top: none;
					}

					span:nth-last-of-type(1) {
						border-bottom: none;
					}
				}
			}
		}

	}
</style>
